<template>
  <div class="adminPermsList-div">
      <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
              <div>
                  <el-input placeholder="搜索" suffix-icon="el-icon-search">
                  </el-input>
              </div>
              <div>
                  <el-button type="info" @click="init()" icon="el-icon-refresh-right">刷新</el-button>
              </div>
          </div>
          <div class="text item">
              <MyCollapse :permsList="permsList"></MyCollapse>
          </div>
      </el-card>
  </div>
</template>

<script>
import MyCollapse from './my-collapse'
export default {
  name: "perms-list",
  components: {
      MyCollapse
  },
  data() {
      return {

      }
  },
  mounted() {
      this.init()
      this.$bus.$on('refreshPermsData', () => {
          this.init()
      })
  },
  methods: {
      async init() {
          let res = await this.$store.dispatch('getPermsList')
          if (!res.success) this.$message.error(res.message)
      }
  },
  computed: {
      permsList() {
          return this.$store.state.perms.permsList
      }
  },
  beforeDestroy(){
      this.$bus.$off('refreshPermsData')
  }
}
</script>

<style scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  padding: 20px 0 10px 0;
  text-align: center;
}
</style>